<template>
  <div class="hello">
    <!--    布局容器-->
    <el-container>
      <!--      顶栏容器-->
      <el-header>
        <div class="header">
          <el-row>
            <el-col :span="20">
              <div class="grid-content-left bg-purple-dark">
                <i class="el-icon-arrow-right" ></i>
                <span style="font-size: 18px;margin-left:25px">登录/注册</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content-right bg-purple-dark">
                <div class="block"><span class="text1">标签2</span></div>
                <div class="block"><span class="text1">标签1</span></div>
              </div>
            </el-col>
          </el-row>


        </div>
      </el-header>
      <!--      主区域容器-->
      <el-main>
        <div class="main">
          <div v-if="flag" class="loginBlock">
            <el-form ref="form" :model="form">
              <div class="title"><span>登录</span></div>
              <el-form-item label="">
                <el-input v-model="form.userName" placeholder="请输入用户名/邮箱"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input v-model="form.password" type="password" placeholder="请输入登录密码"></el-input>
              </el-form-item>

              <el-form-item style="margin-top: 208px;">
                <el-button style="width: 320px" type="primary" @click="onSubmit">登录</el-button>
                <div class="changeBlock"><span>没有账号？</span><span class="chgReg" @click="changeRegister">去注册</span></div>
              </el-form-item>
            </el-form>
          </div>
          <div v-else-if="flag==false" class="loginBlock">
            <el-form ref="loginForm" :model="form">
              <div class="title"><span>注册</span></div>
              <el-form-item label="">
                <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input v-model="form.password" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input style="width: 197px" v-model="form.password" type="password" placeholder="请输入验证码"></el-input>
                <!--                <el-button style="margin-left: 10px">获取验证码</el-button>-->
                <el-button style="margin-left: 10px;width: 112px" type="warn" @click="getCode" :disabled="disabled">
                  {{ send }}
                </el-button>
              </el-form-item>
              <el-form-item label="">
                <el-radio v-model="radio" label="1">学生</el-radio>
                <el-radio v-model="radio" label="2">老师</el-radio>
              </el-form-item>

              <el-form-item style="">
                <el-button style="width: 320px" type="primary" @click="onSubmit">注册</el-button>
                <div class="changeBlock"><span>已有账号？</span><span class="chgReg" @click="changeRegister">去登录</span></div>
              </el-form-item>

            </el-form>
          </div>
        </div>

      </el-main>
    </el-container>
  </div>
</template>

<script>


import {loginApi} from "@/api/user";
import notification from '@/utils/notification'
import {Storage} from '@/utils/localStorage'
const storage = new Storage();

export default {
  name: 'login',
  data() {
    return {
      //验证码模块变量
      send: "获取验证码",
      disabled: false,
      //切换登录注册的逻辑变量
      flag: true,
      radio: "",
      form: {
        userName: "",
        password: "",
      }
    };
  },
  mounted() {
    this.$notification = notification;
  },
  methods: {
     onSubmit() {
      // let res = await loginApi(this.form);
      // if (res && res.data.code == 200){
      //   this.$notification.ntfSuccess("登录成功！",res.data)
      //   await this.$router.push({name: 'WorkView')
      //   console.info("res.data.data",res.data.data)
      //   storage.setItem({ name:"name",
      //     value:res.data.data});
      //
      // }
      // console.info("res!",res.data.data);
      loginApi(this.form).then(res =>{
        if (res.data.code == 200){
          this.$notification.ntfSuccess("登录成功！",res.data)
          // 先存入缓存再跳转
          storage.setItem({ name:"user", value:res.data.data});
          this.$router.push('/work');

        }
      })

    }

    ,
    //登录表单和注册表单的逻辑切换
    changeRegister() {
      this.flag = !this.flag
      console.log(this.flag)
    },
    //获取验证码的计时器效果
    getCode() {
      let self = this
      self.disabled = true
      var time = 59;
      var timer = setInterval(fun, 1000);

      function fun() {
        time--;
        if (time >= 0) {
          self.send = time + "s后刷新";
        } else if (time < 0) {
          self.send = "获取验证码";
          self.disabled = false;
          clearInterval(timer);
          time = 59;
        }
      }
    },


  },
  created() {
    if (storage.getItem("user")){
      // this.$router.push('/work');
    }
  }
}
</script>

<style scoped>

/*左上图标的大小*/
.el-icon-arrow-right{
  font-size: 25px;
}


/*span对应范围会使指针响应*/
.changeBlock .chgReg:hover {

  cursor: pointer;
}

/*设置 “去注册/登录” 的文字颜色*/
.changeBlock .chgReg {
  color: #0052d9;
}

/*“去注册/登录”的文字块*/
.changeBlock {
  /*background-color: #e6e6e6;*/
  width: 320px;
  display: flex;
  /*align-items: start;*/
  justify-content: end;
  margin-left: 50px;
  font-size: 13px;

}

.el-input {
  width: 320px;
}

/*登录注册的长方形块*/
.loginBlock {
  width: 420px;
  height: 580px;
  background-color: white;
  /*margin-top: 100px;*/
  /*margin-right: 190px;*/
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  /*padding-left: 10px;*/
  padding-top: 5px;
  /*padding-right: 30px;*/
  border-radius: 3px;
  margin-right: 330px;
  margin-top: 90px;
}

/*登录注册块的标题*/
.title {
  width: 100%;
  height: 50px;
  /*background-color: #0052d9;*/
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 50px;
  margin-top: 3px;
}

/*去除该标签文字的下划线*/
.router-link {
  text-decoration: none;
}

/*header标签悬浮时鼠标反馈*/
.text1:hover {
  color: #0052d9;
}

/*登录注册标签块设置为白色字体*/
.textReg {
  color: #fff;
}

/*header的标签块*/
.block {
  display: flex;
  width: 70px;
  height: 60px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*border-radius: 4px;*/
  cursor: pointer
}

/*登录标签注册块鼠标悬浮时的反馈效果*/
.register:hover {
  background-color: #6595e5;
}

/*注册标签块*/
.register {
  display: flex;
  background-color: #0052d9;
  width: 100px;
  height: 60px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*border-radius: 4px;*/
  cursor: pointer
}


/*总盒子高度*/
.hello {
  height: 98vh;
}

/*盒子下的header高度*/
.hello .header {
  height: 140px;
}

/*主区域设置背景图，设置登录注册块靠右*/
.hello .main {
  text-align: center;
  height: 829px;
  background-image: url("/src/assets/logn_01.png");
  background-repeat: no-repeat; /* 设置背景图片不重复 */
  background-size: cover;
  display: flex;
  justify-content: end;
  align-items: start;
}

/*layout分栏默认颜色*/
/* .bg-purple-dark {
  background: #99a9bf;
} */

/*layout左导航分栏*/
.grid-content-left {
  /*border-radius: 4px;*/
  display: flex;
  text-align: left;
  align-items: center;
  min-height: 60px;
  border-bottom: 1px solid #e6e6e6
}

/*layout右登录注册分栏*/
.grid-content-right {
  /*border-radius: 4px;*/
  min-height: 60px;
  display: flex;
  justify-content: end;
  border-bottom: 1px solid #e6e6e6;
}

</style>